<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <!-- 公共 -->
    <style></style>
    <!-- 表单容器和内容 -->
    <style></style>
    <!-- 提示框样式 -->
    <style>
        .alert.show {
            opacity: 1;
        }
        
        .alert {
            transition: all .5s;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>欢迎-登录</h3>
        <!-- 登录结果提示框  alert-success-->
        <div class="alert" role="alert">
            提示信息
        </div>
        <!-- 表单 -->
        <div class="form_wrap">
            <form class="login-form">
                <div class="mb-3">
                    <label for="username" class="form-label">账号名</label>
                    <input type="text" class="form-control username" name="username">
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control password" name="password">
                </div>
                <button type="button" class="btn btn-primary btn-login">登录</button>
            </form>

        </div>
    </div>
    <script src="../js/axios.min.js"></script>
    <script src="../lib/form-serialize.js"></script>
    <script>
        // 目标1:点击登录时，用户名和密码长度判断，并提交数据和服务器通信

        // 目标2:使用提示框，反馈提示消息
        // 目标3: 使用form-serialize插件，收集用户名和密码
        //2.1 获取提示框
        const myAlert = document.querySelector('.alert')
            // 2.2 封装提示框的函数，重复调用，满足提示需求
            // 功能:
            // 1，显示提示框
            // 2.不同提示文字，和成功绿色失败红色 isSuccess(true成功，false失败)
            // 3，过2秒后，让提示框自动消失

        function alertFn(msg, isSuccess) {
            // 1.显示提示框
            myAlert.classList.add('show')

            // 2.实现细节
            myAlert.innerText = msg
            const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
            myAlert.classList.add(bgStyle)
                // 3，过2秒后，让提示框自动消失
            setTimeout(() => {
                myAlert.classList.remove('show')
                    // 提示:避免类名冲突，重置背景色
                myAlert.classList.remove(bgStyle)
            }, 2000)
        }

        // 1.1 登录-点击事件

        document.querySelector('.btn-login').addEventListener('click', () => {
            // console.log('ok');
            // 1.2 获取用户名和密码
            // const username = document.querySelector('.username').value
            // const password = document.querySelector('.password').value
            // console.log(username, password)

            // 使用serialize函数，收集登录表单里用户名和密码
            const form = document.querySelector('.login-form')
            const data = serialize(form, {
                hash: true,
                empty: true
            })

            // console.log(data);
            const {
                username,
                password
            } = data
            // 1.3 判断长度
            if (username.length < 8) {
                alertFn('用户名必须大于等于8位', false)
                console.log('用户名必须大于等于8位')
                return // 阻止代码继续执行
            }

            if (password.length < 6) {
                alertFn('密码必须大于等于6位', false)
                console.log('密码必须大于等于6位')
                return
            }

            // 1.4 基于axios提交用户名和密码                    
            // console.log('提交数据到服务器')
            axios({
                url: 'http://hmajax.itheima.net/api/login',
                method: 'POST',
                data: {
                    username,
                    password
                }
            }).then(result => {
                alertFn(result.data.message, true)
                    // console.log(result); //itheima007,7654321 data: {code: 10000, message: '登录成功', data: {…}}
                    // console.log(result.data.message);
            }).catch(error => {
                alertFn(error.response.data.message, false)
                    // console.log(error)
                    // console.log(error.response.data.message);
            })
        })
    </script>
</body>

</html>